<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="fontico/iconfont.css" />
		<link rel="stylesheet" href="css/header.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				plus.navigator.setStatusBarBackground('#c9394a');
			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<h1 class="mui-title title-color">莫信</h1>
		</header>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabindex="0">
				<span class="mui-icon iconfont icon-fire"></span>
				<span class="mui-tab-label">莫信</span>
			</a>
			<a class="mui-tab-item" tabindex="1">
				<span class="mui-icon  iconfont icon-tongxunlu"></span>
				<span class="mui-tab-label">通信录</span>
			</a>
			<a class="mui-tab-item" tabindex="2">
				<span class="mui-icon iconfont icon-zhinanzhen1"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabindex="3">
				<span class="mui-icon iconfont icon-wode-active"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		<script>
			let pages = [{
					"pageId": "chatlist.html",
					"pageUrl": "chatlist.html"
				},
				{
					"pageId": "contact.html",
					"pageUrl": "contact.html"
				},
				{
					"pageId": "discover.html",
					"pageUrl": "discover.html"
				},
				{
					"pageId": "me.html",
					"pageUrl": "me.html"
				},
			];
			let pageStyle = {
				"top": "44px",
				"bottom": "50px"
			}
			mui.plusReady(function() {
				mui.back = () => false;

				let webview = plus.webview.currentWebview();
				for(let i = 0; i < pages.length; i++) {
					let page = plus.webview.create(pages[i].pageId, pages[i].pageUrl, pageStyle);
					page.hide();
					webview.append(page);
				}
				let curIndex = 0;
				plus.webview.show(pages[curIndex].pageId);

				mui(".mui-bar-tab").on("tap", "a", function() {

					let tabIndex = this.getAttribute("tabindex");
					console.log(curIndex);
					console.log(tabIndex);
					plus.webview.show(pages[tabIndex].pageId, "fade-in", 200);
					plus.webview.hide(pages[curIndex].pageId, "fade-out", 200);
					curIndex = tabIndex;
				});

			});
		</script>
	</body>
</html>